<script lang="ts" setup>
import { ref, getCurrentInstance, nextTick } from 'vue'
import { computed } from 'vue'
import { defineComponent, reactive, onMounted } from 'vue';
import axios from 'axios';
import { ElMessageBox } from 'element-plus';
// import Mock from 'mockjs';
let dialogFormVisible = ref(false)
let form = reactive({})
//全局保存编辑的行号
const globalIndex = ref(-1)
// const { proxy } = getCurrentInstance()
const formInline = reactive({
    keyWord: ''
})

// const tableLabel = reactive([
//     {
//         prop: 'aname',
//         label: '名字'
//     },
//     {
//         prop: 'addr',
//         label: '地址',
//         width: 400
//     }
// ])
const draf = reactive<User[]>([])
const cardData = reactive<User[]>([
    // {
    //     id: 1,
    //     aname: '你好',
    //     address: 'No. 189, Grove St, Los Angeles',
    // },
    // {
    //     id: 2,
    //     aname: 'John',
    //     address: 'No. 189, Grove St, Los Angeles',
    // },
    // {
    //     id: 3,
    //     aname: 'Morgan',
    //     address: 'No. 189, Grove St, Los Angeles',
    // },
    // {
    //     id: 4,
    //     aname: '库迪咖啡',
    //     address: 'No. 189, Grove St, Los Angeles',
    // },
]);
const getNCardData = async () => {
    try {
        const res = await axios.get('/api/navigation/getNCardData');
        if (res.status === 200) {
            console.log(res.data.cards);
            
            // cardData.value = res.data.cards;
            // cardData.value = res.data.cards;
            cardData.push(...res.data.cards);
            console.log(cardData);
            console.log("--------------------");
            
            // cardData.value.forEach(item => {
            //     console.log(`ID: ${item.id}, 名称: ${item.aname}, 地址: ${item.address}`);
            // });
        }
    } catch (error) {
        console.error('Error fetching card data:', error);
    // } finally {
    //     loading.value = false;
    }
    

    // const data = await proxy.$api.getNCardData()
    // console.log(data);
    
    // cardData.value = data.cards
    // console.log(data.cardData);
}
onMounted(() => {
    getNCardData()
})

interface User {
    id: Number
    aname: string
    address: string
}
const search = ref('')
const filterCardData = computed(() =>
    cardData.filter(
        (data) =>
            !search.value ||
            data.aname.toLowerCase().includes(search.value.toLowerCase())
    )
)
//编辑
const handleEdit = (row, index) => {
    const newObj = Object.assign({}, row)
    form = reactive(newObj)
    // form = { ...row };
    //把当前编辑的行号赋值给全局保存的id
    console.log(row.id)
    globalIndex.value = index
    // console.log(globalIndex.value)
    dialogFormVisible.value = true
}
//保存
const save = () => {
    if (globalIndex.value >= 0) {
        //表示编辑
        cardData[globalIndex.value] = form
        Object.assign(cardData[globalIndex.value], form); 
        console.log(cardData[globalIndex.value]);

        //还原回去
        globalIndex.value = -1
    } else {
        //新增
        cardData.push(form)
    }
    // nextTick(() => {
    //     console.log('DOM 已更新');
    // }); 

    dialogFormVisible.value = false
}

const handleDelete = (row, index) => {

    cardData.splice(index, 1);
    // ElMessageBox.confirm("确定删除？",{
    //     cancelButtonText:"取消",
    //     confirmButtonText:"确定"
    // }).then(async () => {
    //     await proxy.$api.deleteNCardData({id:row.id});

    // })
        
    // }
}


</script>
<template>

    <el-table :data="filterCardData" style="width: 100%">
        <el-table-column label="名字" prop="aname" />
        <el-table-column label="地址" prop="address" />

        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" placeholder="输入名字查找" />
            </template>
            <template #default="scope">
                <el-button @click="handleEdit(scope.row, scope.$index)">
                    编辑
                </el-button>
                <el-button type="danger" @click="handleDelete(scope.row, scope.$index)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--弹窗-->
    <el-dialog v-model="dialogFormVisible" title="信息" width="40%">
        <el-form :model="form" label-width="100px" style="padding-right:30px ">
            <el-form-item label="名字">
                <el-input v-model="form.aname" autocomplete="off" />
            </el-form-item>
            <el-form-item label="地址">
                <el-input v-model="form.address" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="save">确认</el-button>
            </span>
        </template>
    </el-dialog>



</template>

<style lang="less" scoped></style>